<template>
  <div class="ai-chat-container">
    <!-- 聊天消息显示区域 -->
    <div class="chat-messages" ref="messagesContainer">
      <!-- 遍历消息列表，根据角色显示不同样式 -->
      <div v-for="(message, index) in messages" :key="index" 
           :class="['message', message.role === 'user' ? 'user-message' : 'ai-message']">
        <div class="message-content">
          <!-- AI消息中的图片显示区域 -->
          <div v-if="message.role === 'assistant' && message.images" class="message-images">
            <img v-for="(image, imgIndex) in message.images" 
                 :key="imgIndex" 
                 :src="image" 
                 alt="AI generated image"
                 class="recipe-image" />
          </div>
          <!-- 消息文本内容 -->
          <div class="message-text">{{ message.content }}</div>
        </div>
      </div>
    </div>
    
    <!-- 用户输入区域 -->
    <div class="chat-input">
      <input 
        v-model="userInput" 
        @keyup.enter="sendMessage"
        placeholder="请输入您想要的菜谱信息..."
        type="text"
      />
      <button @click="sendMessage" :disabled="isLoading">
        {{ isLoading ? '发送中...' : '发送' }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import axios from 'axios'

// 定义消息接口类型
interface Message {
  role: 'user' | 'assistant'  // 消息发送者角色：用户或AI助手
  content: string            // 消息内容
  images?: string[]         // 可选的图片数组，用于显示菜谱图片
}

// 响应式状态管理
const messages = ref<Message[]>([])        // 存储所有聊天消息
const userInput = ref('')                  // 用户输入框的内容
const isLoading = ref(false)              // 控制消息发送时的加载状态
const messagesContainer = ref<HTMLElement | null>(null)  // 消息容器的DOM引用

// DeepSeek API配置
const API_KEY = 'sk-0a02faf124cc4000ae3b7a478693f633'
const API_URL = 'https://api.deepseek.com/v1/chat/completions'

// 自动滚动到最新消息
const scrollToBottom = async () => {
  await nextTick()
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 发送消息的主要逻辑
const sendMessage = async () => {
  // 输入验证：检查输入是否为空或是否正在加载
  if (!userInput.value.trim() || isLoading.value) return

  // 构造用户消息对象
  const userMessage: Message = {
    role: 'user',
    content: userInput.value
  }
  
  // 添加用户消息到消息列表
  messages.value.push(userMessage)
  isLoading.value = true
  
  try {
    // 验证API密钥
    if (!API_KEY) throw new Error('请配置有效的DeepSeek API密钥')
    
    console.log('正在发送请求到DeepSeek...')
    // 发送API请求
    const response = await axios.post(API_URL, {
      model: 'deepseek-chat',
      messages: [
        {
          role: 'system',
          content: '你是一个专业的中文厨师助手，请用简洁、专业、中文的语言回答用户的菜谱问题。'
        },
        ...messages.value
      ],
      temperature: 0.7,
      max_tokens: 1000
    }, {
      headers: {
        'Authorization': `Bearer ${API_KEY}`,
        'Content-Type': 'application/json'
      },
      timeout: 30000 // 30秒超时设置
    })

    // 验证API响应数据
    if (!response.data || !response.data.choices || !response.data.choices[0]) {
      throw new Error('API返回数据格式不正确')
    }

    // 清洗AI返回的文本内容
    let rawText = response.data.choices[0].message.content
    rawText = rawText
      .replace(/<\/?(system|user|assistant)>/g, '')  // 移除HTML标签
      .replace(/<s>/g, '')                           // 移除特殊标记
      .replace(/\n{2,}/g, '\n')                      // 合并多个换行
      .trim()                                        // 移除首尾空格

    // 添加AI响应到消息列表
    const aiResponse: Message = {
      role: 'assistant',
      content: rawText
    }

    messages.value.push(aiResponse)
  } catch (error: any) {
    console.error('API调用错误:', error.response?.data || error.message)
    
    // 错误消息处理
    let errorMessage = '抱歉，我遇到了一些问题，请稍后再试。'
    
    if (error.response) {
      // 根据不同的HTTP状态码返回不同的错误信息
      switch (error.response.status) {
        case 401:
          errorMessage = 'API密钥无效或未配置，请检查配置。'
          break
        case 429:
          errorMessage = '请求次数过多，请稍后再试。'
          break
        case 500:
          errorMessage = '服务器错误，请稍后再试。'
          break
        case 503:
          errorMessage = '模型正在加载中，请稍后再试。'
          break
        default:
          if (error.response.data?.error?.message) {
            errorMessage = `错误: ${error.response.data.error.message}`
          }
      }
    } else if (error.code === 'ECONNABORTED') {
      errorMessage = '请求超时，请稍后再试。'
    } else if (error.message) {
      errorMessage = `错误: ${error.message}`
    }

    // 添加错误消息到消息列表
    messages.value.push({
      role: 'assistant',
      content: errorMessage
    })
  } finally {
    // 重置状态
    isLoading.value = false
    userInput.value = ''
    await scrollToBottom()
  }
}

// 组件挂载时初始化欢迎消息
onMounted(() => {
  messages.value.push({
    role: 'assistant',
    content: '你好！我是你的AI厨师助手，请告诉我你想要了解什么菜谱？'
  })
})
</script>

<style scoped>
/* 主容器样式 */
.ai-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 消息显示区域样式 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 消息气泡样式 */
.message {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

/* 用户消息样式 */
.user-message {
  align-items: flex-end;
}

/* AI消息样式 */
.ai-message {
  align-items: flex-start;
}

/* 消息内容样式 */
.message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 用户消息特殊样式 */
.user-message .message-content {
  background: #007AFF;
  color: white;
}

/* 图片显示区域样式 */
.message-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* 菜谱图片样式 */
.recipe-image {
  max-width: 200px;
  border-radius: 8px;
}

/* 输入区域样式 */
.chat-input {
  display: flex;
  gap: 10px;
}

/* 输入框样式 */
input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

/* 发送按钮样式 */
button {
  padding: 12px 24px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

/* 禁用状态按钮样式 */
button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style> 